<style scoped>
    .layui-row {
        overflow: hidden;
    }
    .select-item {
        float: left;
        width: 100%;
        height: auto !important;
        word-break:break-all;
    }
    .layui-row:after, .layui-row:before {
        clear: none;
    }
    .layui-form >>> .layui-form-select{
        z-index: inherit;
    }
    .department >>> .layui-table td, .layui-table th {
        padding: 9px 2px;
        /*white-space: nowrap;*/
    }
    select{
        color: #eee
    }
    option{
        color: #000;
    }
    .layui-inline {
        padding: 5px 0;
    }
    .layui-colla-content {
        border-top: none;
    }
    .layui-colla-title {
        background: none;
        padding-left: 15px !important;
        height: auto;
    }
    .department >>> .layui-colla-icon {
        left: auto;
        right: 15px !important;
    }
    .layui-collapse {
        border: 0 !important;
    }
    /*.department {*/
    /*    position: relative;*/
    /*}*/
    .openicon {
        position: absolute;
        right: 15px;
        top: 10px;
        z-index: 100000;
        border-radius: 50%;
        color: #fff;
        width: 24px;
        text-align: center;
        height: 24px;
        line-height: 24px;
        background: rgba(0,150,136, 0.7);
    }
    .nodata {
        background: #f2f2f2;
        color: #333;
        text-align: center;
        padding: 5px 0;
    }
    .layui-table td p, .layui-table td .rj-cell {
        padding: 3px 0;
    }
    .layui-table td {
        text-align: left !important;
    }

    .rj-wrap {
        font-size: 0;
        width: 100%;
        padding: 0 10px;
        display: flex;
    }
    .cont-left {
        width: 73%;
        display: inline-block;
        font-size: 14px;
        padding: 10px;
    }
    .cont-right {
        width: 29%;
        display: inline-block;
        font-size: 14px;
        padding: 10px;
      background: #fafafa;
    }
    .cont-tit {
        font-size: 12px;
        padding: 5px 10px;
        color: #bbb;
    }
    .cont-box {
        background: #fff;
        margin: 10px 0;
    }
    .rj-cell {
        display: inline-block;
        padding: 5px 10px;
    }
    .attachimg {
        width: 80px;
        padding: 5px 10px;
        height: 80px;
    }
    .attachimg:hover {
        cursor: pointer;
    }

    .layui-elem-field legend.btns {
        position: absolute;
        right: 20px;
        top: -2px;
    }
</style>

<template>
      <div class="app-container">
<!--        <el-page-header @back="$router.push({path: '/harvest/freightorder'})" content="货运单详情">-->
<!--        </el-page-header>-->
        <div class="rj-wrap">
          <div class="cont-left" id="viewSell" v-loading="loading">
            <div class="cont-box" style="margin-top: 5px;">
              <p class="cont-tit">基础信息</p>
              <div>
                <div class="rj-cell">
                  <label>编号：</label>
                  <span>{{form.code}}</span>
                </div>
                <div class="rj-cell"><label>采购日期：</label><span>{{form.purchdate}}</span></div>
                <div class="rj-cell"><label>入库库房：</label><span>{{form.srname}}</span></div>
                <div class="rj-cell"><label>采购主体：</label><span>{{form.orgname + '-' + form.department}}</span></div>
                <div class="rj-cell"><label>供应商：</label><span>{{form.supplier}}</span></div>
                <div class="rj-cell"><label>数量：</label><span>{{form.totalnum}}</span></div>
                <div class="rj-cell"><label>金额：</label><span>{{attachUnit(form.totalamount, '元')}}</span></div>
                <div class="rj-cell"><label>付款状态：</label><span>{{form.payStatusName}}</span></div>
                <div class="rj-cell"><label>状态：</label><span>{{form.statusname}}</span></div>
                <div class="rj-cell"><label>提交人：</label><span>{{form.operator}}</span></div>
                <div class="rj-cell"><label>创建时间：</label><span>{{form.createtime}}</span></div>
                <div class="rj-cell"><label>备注：</label><span>{{form.remark}}</span></div>
              </div>
            </div>
            <p>货品明细</p>

            <el-form :rules="rules" :model="form">
            <el-table :data="form.items" :border="true" >
              <el-table-column label="产品" align="center" prop="productname" />
              <el-table-column label="规格" align="center" prop="spname" />
<!--              <el-table-column label="价格" align="center" prop="price" >-->
<!--                <template slot-scope="scope">-->
<!--                  <span>{{scope.row.price + packUnit(scope.row.stockunit, scope.row.currency)}}</span>-->
<!--                </template>-->
<!--              </el-table-column>-->
              <el-table-column label="数量" align="center" prop="createdate" >
                <template slot-scope="scope">
                  <span>{{scope.row.count}}{{scope.row.stockunit ? scope.row.stockunit : ''}}</span>
                </template>
              </el-table-column>
              <el-table-column label="已入库数量" align="center" prop="loadcount" >
                  <template slot-scope="scope">
                    <span v-if="scope.row.loadcount">{{scope.row.loadcount}}{{scope.row.stockunit ? scope.row.stockunit : ''}}</span>
                  </template>
              </el-table-column>
              <el-table-column label="入库数量" align="center" prop="weight" >
                <template slot-scope="scope">
                  <el-form-item label-width="0" v-if="operate" :prop="'items.'+scope.$index+'.weight'" :rules="rules.weight">
                    <el-input size="small" v-model="scope.row.weight" placeholder="请输入数量"/>
                  </el-form-item>
<!--                  <span v-if="!operate">{{scope.row.weight}}</span>-->
                </template>
              </el-table-column>
              <el-table-column label="入库库间" align="center" prop="shrguid" >
                <template slot-scope="scope">
                  <el-form-item label-width="0" v-if="operate" :prop="'items.'+scope.$index+'.shrguid'" :rules="rules.shrguid">
                <el-select size="small" v-model="scope.row.shrguid" placeholder="请选择入库库间" filterable clearable>
                  <el-option
                    v-for="item in shrItem[scope.$index]"
                    :key="item.guid"
                    :label="item.name"
                    :value="item.guid"
                  />
                </el-select>
                  </el-form-item>
<!--                  <span v-if="!operate">{{scope.row.shrguid}}</span>-->
                </template>
              </el-table-column>
              <el-table-column width="60" label="操作">
                <template slot-scope="scope">
                <el-button @click="delItem(scope.$index)">-</el-button>
                </template>
              </el-table-column>
            </el-table>
            </el-form>

            <div v-if="operate">
            <el-form>
              <el-form-item>
                <textarea placeholder="请输入审批意见" rows="4" cols="136" v-model="idea" style="float: left;width: 100%;margin-top: 20px"></textarea>
              </el-form-item>
            </el-form>
              <div>
                <upload-file :fileIds="fileIds" :fileName="fileName"></upload-file>
              </div>
              <span style="margin-left: 70%">
              <el-switch v-model="exchangeRate" active-color="#409EFF" inactive-color="#C0CCDA" active-text="结束流程"></el-switch>
            <el-button @click="submitItem" style="margin-left: 10px">提 交</el-button>
                </span>
            </div>
<!--            <div v-if="nodeName">-->
<!--            <div v-for="node in nodeName">-->
<!--              <el-button type="primary" style="margin-top: 20px;float: left;margin-left: 20px;margin-right: 20px" @click="nodeTodo">{{node}}</el-button>-->
<!--            </div>-->
<!--          </div>-->
          </div>
          <div class="cont-right">
            <FlowNode v-if="isReady" ref="nodesElem" :flowid="flowid" :orderid="id" ></FlowNode>
          </div>
        </div>
      </div>
</template>

<script>
  import UploadFile from '@/components/UploadFile'
  import FlowNode from '@/components/FlowNode/index'
  import { getPurchasebill,getShr,submitData} from "@/api/purchase/purchase";
  import {getPendingNode} from "@/api/public";
    let qs = require('qs');
    export default {
        name: 'purchaseNodeInfo',
        data () {
            return {
              loading: false,
              flowid: 26,
              id : '',
              form: {},
              isReady: false,
              nodeName:[],
              shrItem:[],
              fileList:[],
              fileIds:[],
              fileName:'附件',
              idea:'',
              taskid:'',
              operate:false,
              exchangeRate:false,
              exchangerate:0,
              rules:{
                weight:[{required:true,message:'入库数量不能为空',trigger:'blur'},],
                shrguid:[{required:true,message:'请选择入库库间',trigger:'change'}]
              }
            }
        },
        components: {
          FlowNode,
          UploadFile,
        },
      created() {
            let that = this;
            this.taskid=this.$route.query.taskid;
            this.id = this.$route.query.id;
            // this.id=this.$router.params.id;
            this.getOrder(this.id);

            this.getNode();
        },
      watch:{
        // 'exchangeRate'  :function(val,oldVal){
        //   console.log("val:---",val)
        //   console.log("old:--",oldVal)
        // }
      },
        methods: {
          submitItem(){
            let that=this;
            if (that.exchangeRate==true){
              that.exchangerate=1
            }else {
              that.exchangerate=0
            }
            let opinion=that.idea;
            let id=that.id;
            let taskid=that.taskid;
            let data={};
            that.form.items.map(item=>{
              item.applyitemid=item.guid;
            })
            data.exchangerate=that.exchangerate
            data.whinitems=that.form.items;
            that.$confirm("是否确认提交","提示",{
              confirmButtonText:'确认',
              cancelButtonText:'取消',
              type:'info'
            }).then(function(){
              return submitData(data,taskid,id,opinion,that.fileIds[0]).then(response=>{
                if (response.code==200){
                  that.msgSuccess("提交成功")
                  that.getOrder(that.id);
                  that.getNode();
                }else {
                  that.msgError("提交失败")
                }
              })
            })

          },
          delItem(index){
            this.form.items.splice(index,1)
          },

          initShrItem(){
            this.form.items.map(item=>{
              let data={
                type:item.type,
                id:this.form.strmId
              }
              getShr(data).then(response=>{
                this.shrItem.push(response.data)
              })
            })
            console.log("item:",this.shrItem)
          },

          nodeTodo(){
            this.$router.push({path:'/',})
          },
          getNode(){
            let data={
              flowid:26,
              orderId:this.id
            }
            getPendingNode(data).then(response=> {
              this.operate=false;
              let data = response.data;
              data.map(item => {
                if (item.operate == "transferIn26") {
                  this.operate = true;
                  return;
                }
              })
            })
          },
          packUnit: function(unit, currency) {
            return unit != undefined && unit != '' ? currency == 2 ? '美元/' + unit : '元/' + unit : '';
          },
          getOrder: function (id) {
            let that = this;
            getPurchasebill(id).then(response => {
                this.loading = false;
                if (response.code == 200) {
                  this.form = response.data;
                  this.initShrItem();
                  console.log('this.form:', this.form)
                  this.isReady = true;
                } else {
                    this.msgError('系统错误');
                }
              });

          }
        }
    }
</script>
